<template>
    <div class="container">
      <button @click="fetchMapData">按钮1</button>
      <button @click="fetchSellerData">按钮2</button>
      <button @click="fetchMapDistributionData">按钮3</button>
      <button @click="fetchRankData">按钮4</button>
      <button @click="fetchHotProductData">按钮5</button>
      <button @click="fetchStockData">按钮6</button>
    </div>
  </template>
  
  <script>
  import axios from 'axios';
  
  // 设置全局默认配置
  axios.defaults.timeout = 3000; // 设置请求超时时间为3秒
  
  // 请求拦截器：用于在请求发出之前处理请求
  axios.interceptors.request.use(config => {
      if (!config.headers['Authorization']) {
          const token = Math.random().toString(36).substr(2, 8); // 生成八位随机字符串
          config.headers['Authorization'] = token;
      }
      return config;
  }, error => {
      return Promise.reject(error);
  });
  
  // 响应拦截器：用于在响应到达之前处理响应
  axios.interceptors.response.use(response => {
      if (response.status !== 200) { // 根据实际返回格式调整逻辑
          alert('异常：' + response.statusText);
      }
      return response;
  }, error => {
      if (error.response && error.response.status !== 200) {
          alert('网络异常');
      } else {
          alert('请求失败');
      }
      return Promise.reject(error);
  });
  
  export default {
    data() {
      return {
        mapData: null,
        sellerData: null,
        mapDistributionData: null,
        rankData: null,
        hotProductData: null,
        stockData: null,
      };
    },
    methods: {
      async fetchMapData() {
        try {
          const response = await axios.get("http://localhost:8080/map/china.json");
          this.mapData = response.data;
          console.log('地图数据:', this.mapData);
        } catch (error) {
          console.error('请求出错:', error.response ? error.response.data : error.message);
        }
      },
      async fetchSellerData() {
        try {
          const response = await axios.get("http://localhost:8888/api/seller");
          this.sellerData = response.data;
          console.log('商家销售量统计:', this.sellerData);
        } catch (error) {
          console.error('请求出错:', error.response ? error.response.data : error.message);
        }
      },
      async fetchMapDistributionData() {
        try {
          const response = await axios.get("http://localhost:8888/api/map");
          this.mapDistributionData = response.data;
          console.log('商家分布:', this.mapDistributionData);
        } catch (error) {
          console.error('请求出错:', error.response ? error.response.data : error.message);
        }
      },
      async fetchRankData() {
        try {
          const response = await axios.get("http://localhost:8888/api/rank");
          this.rankData = response.data;
          console.log('地区销售排行:', this.rankData);
        } catch (error) {
          console.error('请求出错:', error.response ? error.response.data : error.message);
        }
      },
      async fetchHotProductData() {
        try {
          const response = await axios.get("http://localhost:8888/api/hotproduct");
          this.hotProductData = response.data;
          console.log('热销商品销售金额占比统计:', this.hotProductData);
        } catch (error) {
          console.error('请求出错:', error.response ? error.response.data : error.message);
        }
      },
      async fetchStockData() {
        try {
          const response = await axios.get("http://localhost:8888/api/stock");
          this.stockData = response.data;
          console.log('库存销售量:', this.stockData);
        } catch (error) {
          console.error('请求出错:', error.response ? error.response.data : error.message);
        }
      }
    }
  };
  </script>
  
  <style scoped>
  .container {
      width: 600px;
      height: 300px;
      display: flex;
      flex-direction: row;
      border: 1px solid #000;
      margin: 100px;
  }
  .container button {
      width: 80px;
      height: 40px;
      background-color: aquamarine;
      margin: 20px;
  }
  </style>